<template>
  <div>
    <el-button
      class="friend__btn"
      @click="(dialogVisible = true), (title = '添加')"
      type="primary"
      size="mini"
      >添加</el-button
    >
    <el-table :data="links">
      <el-table-column label="id" prop="id" />
      <el-table-column label="name" prop="name" />
      <el-table-column label="link" prop="link" />
      <el-table-column label="doc" prop="doc" />
      <el-table-column label="操作">
        <template #default="props">
          <el-button size="mini" @click="handleEdit(props.row)">编辑</el-button>
          <el-popconfirm
            title="你确定要删除这个链接吗"
            @confirm="handleDelete(props.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <cpnDialog
    :title="title"
    :form="infoForm"
    :dialogVisible="dialogVisible"
    @handleClose:show="handleDialogClose"
  />
</template>

<script>
import { reactive, ref } from "vue";
import { getLinks, delInfo } from "@/network/api/friend";
import { ElMessage } from "element-plus";
import cpnDialog from "./cpnDialog";
export default {
  components: {
    cpnDialog,
  },
  setup() {
    const dialogVisible = ref(false);
    const title = ref("");
    const links = ref([]);
    const infoForm = reactive({
      id: "",
      name: "",
      link: "",
      doc: "",
    });
    const getLinksData = async () => {
      const res = await getLinks();
      links.value = res.result;
    };
    const handleDelete = (id) => {
      delInfo({ id }).then((res) => {
        if (res.status === 200) {
          ElMessage.success(res.msg);
          getLinksData();
        }
      });
    };
    const handleEdit = (row) => {
      infoForm.id = row.id;
      infoForm.name = row.name;
      infoForm.doc = row.doc;
      infoForm.link = row.link;
      dialogVisible.value = true;
      title.value = "修改";
    };
    const handleDialogClose = (success) => {
      dialogVisible.value = false;
      infoForm.id = "";
      infoForm.name = "";
      infoForm.link = "";
      infoForm.doc = "";
      if (success) {
        getLinksData();
      }
    };
    getLinksData();
    return {
      links,
      infoForm,
      title,
      handleDelete,
      handleEdit,
      handleDialogClose,
      dialogVisible,
    };
  },
};
</script>

<style scoped>
.friend__btn {
  margin-top: 20px;
  margin-left: 50px;
}
</style>